Skip to content

[DEV] LLMInputBox 페이지별 연결#88

Merged
drddyn merged 6 commits intodevelopfrom
dev/llm-input-api
Mar 19, 2026
Merged

[DEV] LLMInputBox 페이지별 연결#88
drddyn merged 6 commits intodevelopfrom
dev/llm-input-api

Conversation

@drddyn
Copy link
Owner

@drddyn drddyn commented Mar 16, 2026

🔗 관련 이슈

close #55

✨ 요약

페이지별 맞는 훅을 LLMInputBox에 연결합니다

📝 작업 내용

  • 섹션 페이지 내 -> usePostSectionInSectionPage
  • 매거진 페이지 내 ->usePostSection
  • 찜한 페이지, 둘러보기 -> usePostMagazine

drddyn added 3 commits March 16, 2026 22:25
- explore와 loved 일시 매거진 생성(usePostMagazine)으로 이어지도록 수정
@drddyn drddyn self-assigned this Mar 16, 2026
@vercel
Copy link

vercel bot commented Mar 16, 2026

The latest updates on your projects. Learn more about Vercel for GitHub.

Project Deployment Actions Updated (UTC)
mine Ready Ready Preview, Comment Mar 19, 2026 7:51am

@gemini-code-assist
Copy link

Summary of Changes

Hello, I'm Gemini Code Assist1! I'm currently reviewing this pull request and will post my feedback shortly. In the meantime, here's a summary to help you and other reviewers quickly get up to speed!

이 PR은 LLMInputBox 컴포넌트의 기능을 확장하여 사용자가 현재 보고 있는 페이지의 맥락에 따라 다양한 방식으로 콘텐츠를 생성하고 상호작용할 수 있도록 합니다. 매거진 페이지, 섹션 페이지, 또는 일반 둘러보기 페이지에서 LLMInputBox를 통해 섹션을 추가하거나 새로운 매거진을 생성하는 등의 작업을 수행할 수 있도록 백엔드 API와 프론트엔드 로직을 연결합니다.

Highlights

  • 새로운 API 엔드포인트 및 타입 추가: 매거진에 섹션을 추가하거나 매거진 내 특정 섹션 페이지에 섹션을 추가하기 위한 API 함수와 관련 타입이 정의되었습니다.
  • 새로운 React 훅 구현: usePostAddSectionusePostAddSectionInSectionPage 훅이 추가되어 섹션 추가 API 호출을 관리합니다.
  • LLMInputLayout 동적 연결: 현재 페이지 경로에 따라 LLMInputBox가 적절한 섹션 추가 또는 매거진 생성 훅에 동적으로 연결되도록 로직이 개선되었습니다.
  • 프록시 설정 업데이트: 개발 환경의 API 프록시 대상 URL이 변경되었습니다.
Changelog
  • Mine/src/api/magazine.ts
    • RequestAddSection, RequestAddSectionInSectionPage, ResponseAddSection, ResponseAddSectionInSectionPage 타입과 postAddSection, postAddSectionInSectionPage 함수가 추가되었습니다.
  • Mine/src/components/LLMInputLayout.tsx
    • LLMInputBoxonSend 핸들러가 현재 라우트(섹션 페이지, 매거진 페이지, 기타)에 따라 usePostAddSection, usePostAddSectionInSectionPage, usePostMagazine 훅 중 하나를 사용하도록 동적으로 설정되었습니다.
    • 로그인 상태 및 숨겨진 경로에 따라 컴포넌트 렌더링 여부가 결정되었습니다.
  • Mine/src/hooks/usePostAddSection.ts
    • magazineIdmessage를 받아 매거진에 섹션을 추가하는 useMutation 훅이 새로 추가되었습니다.
  • Mine/src/hooks/usePostAddSectionInSectionPage.ts
    • magazineId, sectionId, message를 받아 특정 섹션 페이지에 섹션을 추가하는 useMutation 훅이 새로 추가되었습니다.
  • Mine/src/types/magazine.ts
    • 섹션 추가 요청 및 응답에 필요한 RequestAddSection, RequestAddSectionInSectionPage, ResponseAddSection, ResponseAddSectionInSectionPage 타입 정의가 추가되었습니다.
  • Mine/vite.config.ts
    • 개발 서버의 /api 프록시 대상이 http://52.63.142.228:8080에서 https://api.minelover.com으로 변경되었습니다.
Activity
  • 현재까지 이 PR에 대한 특별한 활동은 없습니다.
Using Gemini Code Assist

The full guide for Gemini Code Assist can be found on our documentation page, here are some quick tips.

Invoking Gemini

You can request assistance from Gemini at any point by creating a comment using either /gemini <command> or @gemini-code-assist <command>. Below is a summary of the supported commands on the current page.

Feature Command Description
Code Review /gemini review Performs a code review for the current pull request in its current state.
Pull Request Summary /gemini summary Provides a summary of the current pull request in its current state.
Comment @gemini-code-assist Responds in comments when explicitly tagged, both in pull request comments and review comments.
Help /gemini help Displays a list of available commands.

Customization

To customize Gemini Code Assist for GitHub experience, repository maintainers can create a configuration file and/or provide a custom code review style guide (such as PEP-8 for Python) by creating and adding files to a .gemini/ folder in the base of the repository. Detailed instructions can be found here.

Limitations & Feedback

Gemini Code Assist may make mistakes. Please leave feedback on any instances where its feedback is incorrect or counter productive. You can react with 👍 and 👎 on @gemini-code-assist comments. If you're interested in giving your feedback about your experience with Gemini Code Assist for GitHub and other Google products, sign up here.

You can also get AI-powered code generation, chat, as well as code reviews directly in the IDE at no cost with the Gemini Code Assist IDE Extension.

Footnotes

  1. Review the Privacy Notices, Generative AI Prohibited Use Policy, Terms of Service, and learn how to configure Gemini Code Assist in GitHub here. Gemini can make mistakes, so double check it and use code with caution.

Copy link

@gemini-code-assist gemini-code-assist bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Code Review

이 PR은 LLMInputBox 컴포넌트를 여러 페이지에 연결하고, 각 페이지의 컨텍스트에 맞는 API를 호출하도록 하는 변경 사항을 포함하고 있습니다. 전반적으로 PR의 목표는 잘 달성되었으나, 코드의 가독성과 유지보수성을 높일 수 있는 몇 가지 개선점이 보입니다. 특히, 중복되는 타입 정의를 제거하고, React hook과 컴포넌트 로직을 더 간결하게 리팩토링하는 것을 제안합니다. 또한, 사용자 경험에 영향을 줄 수 있는 alert 사용 대신 다른 오류 처리 방식을 고려해 보시는 것이 좋겠습니다.

},
onError: (error) => {
console.log('섹션 생성:', error)
alert('섹션 생성에 실패했습니다.')

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

high

alert()는 사용자의 흐름을 방해하고 좋지 않은 사용자 경험을 제공할 수 있습니다. 에러 메시지를 표시하기 위해 토스트 UI 컴포넌트나 페이지 내 메시지 영역을 사용하는 것을 고려해 보세요. 이는 사용자에게 더 나은 피드백을 제공하고 애플리케이션의 일관성을 유지하는 데 도움이 됩니다.

References
  1. Using a consistent toast message for user feedback, especially for error messages, aligns with providing a better and more consistent user experience across different actions within the same conceptual flow.

},
onError: (error) => {
console.log('섹션 생성:', error)
alert('섹션 생성에 실패했습니다.')

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

high

alert()는 사용자의 흐름을 방해하고 좋지 않은 사용자 경험을 제공할 수 있습니다. 에러 메시지를 표시하기 위해 토스트 UI 컴포넌트나 페이지 내 메시지 영역을 사용하는 것을 고려해 보세요. 이는 사용자에게 더 나은 피드백을 제공하고 애플리케이션의 일관성을 유지하는 데 도움이 됩니다.

References
  1. Using a consistent toast message for user feedback, especially for error messages, aligns with providing a better and more consistent user experience across different actions within the same conceptual flow.

@drddyn drddyn merged commit 26dfb5c into develop Mar 19, 2026
3 checks passed
@drddyn drddyn deleted the dev/llm-input-api branch March 19, 2026 07:52
drddyn added a commit that referenced this pull request Mar 19, 2026
* chore: Update issue templates

* chore: Add pull request template

* chore: 이슈 템플릿 생성 및 수정

* chore: 개발 환경 설정

- vite 생성
- prettier, eslint 적용
- tailwind 적용

* dev: 라우팅 작업

* fix: 라우팅 수정

* dev: 로그인페이지 작업

1. 왼쪽 상단 뒤로가기 버튼 O
2. 아이디, 비밀번호 아이콘 및 입력가능 O
3. 로그인, 회원가입, 찾기 버튼 O

로고 삽입을 제외한 전반적인 UI 작업 완료
png 파일 경로로 넣는거 말고 다른방법을 찾고 잇습니다 ㅜㅜ

* feat: 공용 컴포넌트 inputbox 생성

* feat: svgr 활성화

* feat: 글꼴, 색상 css 추가

* feat: poltawski 추가

* feat: 색상 코드 수정

* feat: tracking 수정

* feat: 회원가입 페이지

* docs: PR 템플릿 수정

* chore: 이슈 템플릿 타이틀 수정

* feat: 사이드바 UI 작업

* style: svg 아이콘 교체

메인 로고 추가
뒤로가기 버튼(svg 방식 변경)
로그인, 비밀번호 아이콘(svg 방식 변경)

* feat: 사이드바 위치 고정

* rename: router 수정

* feat: 사이드바 라우팅 처리

* dev: 환경설정페이지 UI 작업(1차)

메인페이지 톱니바퀴 임의생성하여 설정페이지랑 연결하여 표시했습니다.

-프로필 설정 및 화면 설정의 큰 틀 구성 완료
-버튼 형식 부분 효과 추가
-svg 파일 넣는 방식 아직 변경X(icon 만들어 놓은게 안떠서 못했습니다.)

* refactor: 공용 컴포넌트 사용하도록 리팩토링

* feat: 회원가입 페이지 스타일링 조정

* dev: 아이디/비밀번호찾기 페이지 UI 제작

올려놓은 Inputbox 활용해서 제작하였습니다. 대부분의 UI는 완성되었습니다.

추가 세부사항(일단 해볼텐데 제가 잘 구현을 못해서 참고사항으로 남겨 놓겠습니다.)

-이메일 선택부분은 목록상자 넣어놓긴했는데 svg(아래 세모)에 설정하는 방법을 몰라서 아직 보류
-이전으로 버튼 클릭하면 로그인페이지로 돌아가게 만들려고 했는데 로그인페이지 연결안되는것도 보류

* Update FindIdForm.tsx

* style: 스타일링 수정

* feat: 아이콘 수정

* rename: 아이콘 파일 네이밍 수정

* Change issue template title from [FEAT] to [DEV]

* feat: 매거진 UI 작업

* feat: 매거진 상단 정보 수정

- 마루부리 글꼴 추가

* fix: 아이디/비밀번호 찾기 페이지 수정

폰트, 색상, 픽셀숫자, 주석지우기 완료했습니다.
디자인 수정도 완료했습니다.

* feat: dir,svg 파일 수정

* style: w-screen 속성 제거

* chore: 라우팅 변경

* style: 이메일 인풋박스 스타일링 수정

* chore: global.css 추가

* style: 버튼 속성 추가

* style: 관심사 선택 칩으로 변경

* style: 인풋 박스 스타일링 일치

* style: 아이콘 변경 및 디테일 수정

* feat: 공용 컴포넌트 버튼 생성

* dev: LLM입력창 UI 제작

입력창에 입력줄이 늘어날 수록 입력창을 크게 만들었습니다. (최대 4줄까지)
입력시 로딩되는지 애니메이션 만들어서 확인했습니다.

-메인페이지 사이드바랑 연결이 안되는 것 같은데 수정 도와주십시오.
-입력창 화면에서 대칭이 맞는듯 안맞는거 같은데 수정을 해도 안바껴서 확인 부탁드립니다.
-보내기 버튼 화살표는 피그마에서 svg 파일로 다운하는게 없던데 맞는지 확인해주십시오

* Update LLMInputBox.tsx

* feat: 사이드바 수정

* feat: 사이드바 열렸을 경우 페이지 연결

* feat: 사이드바 작동 및 코드 수정

* fix: 환경설정페이지 UI 수정

버튼 팝업 작업 외의 UI 작업을 완료했습니다.

-로그아웃이랑 수정 아이콘이랑 색 맞춰서 같이 hover 되게하는게 안돼요..
지피티 물어보면서 했는데 svg파일 자체를 색을 맞출 수가 없다? 이런식으로 대답해서 아시면 수정부탁드려요

* style: 세팅페이지 스타일링 수정

* chore: 버셀 배포

* ci: 워크플로우 추가

* chore: 패키지.json 파일 경로 추가

* Update ci.yml

* Update ci.yml

* ci: ci 파일 수정

* Rename Back.svg to back.svg

* Add hamburger.svg icon file

* Rename SidebarButton.svg to sidebarButton.svg

* Rename Toggle_up.svg to toggle_up.svg

* Rename Vector.svg to vector.svg

* Update EmailInputBox.tsx

* feat: 로그인 api 연결

* feat: 회원가입 페이지 연결

* feat: 로그아웃 api 연결

* feat: 리프레쉬 토큰 api 연결

* feat: 회원가입 페이지 API 연결

* feat: 프로필 설정 페이지 기능 추가

로그아웃 버튼, 수정(저장) 버튼, 카메라 버튼
작동되도록 개발하였습니다.

- 카메라 아이콘 색 변경이 적용이 안되는거 같아 확인 부탁드립니다.(svg 파일에 따라서 색이 적용 안되는것도 있는거 같기도.. 내피셜)

* feat: 화면 설정 페이지 기능 추가

무드보드 생성하기 버튼, 컴퓨터에서 이미지 가져오기 버튼 기능 추가했습니다.

* feat: CI 오류 해결

* dev: 랜딩페이지 제작

랜딩페이지를 제작합니다.

* feat: svg 파일로 수정

* chore: 파일 경로 수정

* feat: 사이드바 리디자인 적용

* feat: 사이드바 매거진 api 연결

* style: 사이드바 스타일링 수정

* feat: 사이드바 프로필 api 연결

* feat: 설정 모달 api 연결 및 zustand 적용

* chore: 코드 삭제

* feat: 매거진 삭제 API 연결

* dev: 둘러보기 페이지 제작

* dev: 둘러보기 페이지 제작

* feat: 매거진 생성, 수정

* chore: 위치 변경

* feat: 최근 열람 섹션 확인

* dev: 저장한 매거진 페이지 제작

* feat: lint 오류 수정

* chore: 코드 수정

- 그림자 코드 삭제
- 코드 간결하게 수정

* feat: sectionpage api 연결

* chore: 함수 네이밍 변경

* feat: 매거진 페이지 연결

추후에 그리드 패턴 수정이 필요함

* feat: 프로필 정보 UI 추가

* feat: 사이드바 레이아웃 추가

* feat: 섹션 햄버거 모달 UI 추가

* feat: 리디자인 부분 적용

- 모달 UI
- 하트 UI

* dev: 저장된 매거진 API 작업중

* feat: 인덱스 디자인 작업, 햄버거 연결

- 햄버거 섹션과 패러그래프 분리
- 인덱스 디자인 추가

* feat:LLMInputBox 레이아웃 적용

* feat: 좋아요 누르기 api 연결

* feat: 제미나이 코드리뷰 반영

* feat:린트 오류 해결

* chore: 파일 구조 정리

* feat: 섹션 내 pargraph 삭제 api 추가

* fix: 프로필 이미지 수정 로직 변경

* feat: 제미나이 코드 리뷰 반영

* dev: 새로운 랜딩페이지, 로그인페이지, 회원가입페이지 UI 제작

* chore: .vite gitignore 추가

* fix: eslint ignore vite deps

* fix: isValidPassword useMemo 적용

* chore: vite/deps 폴더 삭제

* feat:스타일링 변경

* dev: 좋아요 매거진 페이지 API 연결

* fix: LLMInputBox 중복 제거

* fix: 코드 개선 및 보안 취약점 수정

* style: css 파일 리디자인안으로 수정

* feat: 사이드바 색상 변경 및 타이포 관련 css 파일 수정

* style: css 적용

* fix: 페이지 이동

* feat: 사이드바 색상 변경, 제미나이 리뷰 적용

* feat: 레이아웃 수정, 화면 고정

* dev: 추천 매거진 API 연결

* refactor: 타입 단언 제거

* fix: useInfiniteQuery 타입 에러 수정

* feat: 사이드바 주스탠드 설정 및 적용

* feat: 매거진 페이지 사이드바 수정

* feat: 사이드바 토글 추가

* feat: 제미나이 리뷰 반영

* dev: 설정 페이지 추가 화면 구현

* fix: gemini 코드 리뷰 피드백 반영

* fix: 섹션 삭제 에러 수정

* fix: 사이드바 햄버거 클릭 안 되는 에러 수정

* feat: 사이드바 호버 디자인 수정

* feat: 스크롤바 디자인 변경

* feat: 제미나이 코드리뷰 반영

* dev: 공유모달 UI 제작

* fix: gemini 코드 리뷰 피드백 반영

* feat: 매거진 대표 화면 레이아웃 설정

* feat: 매거진 대표 페이지 위 매거진 정보 추가

* fix: lint 오류 해결

* dev: 설정페이지 API 연결중

* fix: 공용 Toast, ConfirmModal 컴포넌트 분리

* feat: 제미나이 코드 리뷰 반영

* style: 사이드바 스타일 개선

* dev: 설정페이지 API 연결

* fix: 피드백 반영

* fix: vite를 dependencies로 이동

* style: css 추가 및 세팅 모달 스타일링 변경

* dev: 새매거진 인풋 박스 UI 제작

* fix: 충돌 해결

* dev: 로그인 안했을 때 페이지 UI 제작

* feat: 비밀번호 수정 버튼 추가 및 스타일링변경

* feat: api 주제 연결 및 스타일링 변경

* feat: 게스트페이지 뜨는 기준 변경

* fix: flickering 이슈, 모달 안 닫힘 이슈 해결

* chore:주석 제거

* [DEV] 추천 매거진 API 연결 (#65)

Co-authored-by: yoonvinjeong <anaabc1004@naver.com>

* [FEAT] 설정 모달 UI 변경 및 추가 API 연결 (#84)

* feat: 설정모달 UI 수정 및 무드보드 생성 버튼 UI와 API

* fix: 피드백 수정 및 이미지 업로드 오류 수정

* fix: 색상값 수정

* style: 색상 변경

---------

Co-authored-by: yoonvinjeong <anaabc1004@naver.com>

* [DEV] 배경화면 관련 스타일 변경 (#85)

* feat: 설정모달 UI 수정 및 무드보드 생성 버튼 UI와 API

* fix: 피드백 수정 및 이미지 업로드 오류 수정

* fix: 색상값 수정

* dev: 배경화면 관련 스타일 변경

* feat: 글씨체 변경

* fix: 레이아웃 수정

* fix: 제미나이 피드백 수정

* fix: tailwind 형식으로 수정

* feat: toast 로직 useEffect 사용

---------

Co-authored-by: yoonvinjeong <anaabc1004@naver.com>

* [DEV] LLMInputBox 페이지별 연결 (#88)

* feat: LLMInputBox 페이지별 API 연결

* feat: 프록시 우회 설정

* Update LLMInputLayout.tsx

- explore와 loved 일시 매거진 생성(usePostMagazine)으로 이어지도록 수정

* style: llm인풋박스 스타일링 변경

* feat: 제미나이 피드백 반영

* [DEV] 매거진 페이지 햄버거 모달 연결 및 API 기능 추가 (#90)

* feat: 설정모달 UI 수정 및 무드보드 생성 버튼 UI와 API

* fix: 피드백 수정 및 이미지 업로드 오류 수정

* fix: 색상값 수정

* dev: 배경화면 관련 스타일 변경

* feat: 글씨체 변경

* fix: 레이아웃 수정

* fix: 제미나이 피드백 수정

* fix: tailwind 형식으로 수정

* dev: 매거진 페이지 햄버거 모달 연결 및 API 기능 추가

---------

Co-authored-by: yoonvinjeong <anaabc1004@naver.com>

* fix: 빌드 오류 해결

---------

Co-authored-by: eun_0903 <134464931+eun0903@users.noreply.github.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

[DEV] LLMInputBox API 연결

1 participant